<script setup lang="ts">
	import { User, Lock, CircleClose, UserFilled } from '@element-plus/icons-vue'
	import { FormRules, FormInstance } from 'element-plus'
	import { GlobalStore } from '@/stores'
	import { ref } from 'vue'
	import { codeApi } from '@/api/modules/user'
	const globalStore = GlobalStore()
	const loginForm = ref({ phone: '18174615566', password: '123123' })
	const codeForm = ref({ phone: '', code2: '' })

	const loading = ref(false)
	const isShow = ref(false)
	const isCode = ref(false)

	const isTime = ref(60)
	const loginRules = ref<FormRules>({
		phone: [{ required: true, trigger: 'blur', message: '用户名不能为空' }],
		password: [{ required: true, trigger: 'blur', message: '密码不能为空' }],
	})
	const codeRules = ref<FormRules>({
		phone: [{ required: true, trigger: 'blur', message: '用户名不能为空' }],
		password: [{ required: true, trigger: 'blur', message: '密码不能为空' }],
	})
	const loginFormRef = ref<FormInstance>()
	const codeFormRef = ref<FormInstance>()

	const submitLoginForm = async () => {
		loading.value = true
		await loginFormRef.value.validate()
		const { phone, password } = loginForm.value
		globalStore.login({ phone, password })
		loading.value = false
	}
	const submitCodeForm = async () => {
		loading.value = true
		await codeFormRef.value.validate()
		const { phone, code2 } = codeForm.value
		globalStore.login({ phone, code2 })
		loading.value = false
	}
	const getCode = async () => {
		isCode.value = true
		const { data } = await codeApi({ phone: codeForm.value.phone })
		setTimeout(() => {
			codeForm.value.code2 = data
		}, 3000)
		let time = setInterval(() => {
			if (isTime.value <= 0) {
				clearInterval(time)
				isTime.value = 60
				isCode.value = false
				return
			}
			isTime.value--
		}, 1000)
	}
	const swiperShow = () => {
		isShow.value = !isShow.value
	}
</script>

<template>
	<div class="login-form">
		<div v-if="isShow">
			<el-form ref="loginFormRef" :model="loginForm" :rules="loginRules">
				<el-form-item prop="userName">
					<el-input v-model="loginForm.phone" :prefix-icon="User" placeholder="请输入手机号" />
				</el-form-item>

				<el-form-item prop="password">
					<el-input v-model="loginForm.password" :prefix-icon="Lock" type="password" placeholder="请输入密码" />
				</el-form-item>
			</el-form>

			<div class="form-btn">
				<el-button :icon="CircleClose" type="default" round @click="loginFormRef?.resetFields()">重置</el-button>
				<el-button :icon="UserFilled" type="primary" round :loading="loading" @click="submitLoginForm">登录</el-button>
			</div>
			<div @click="swiperShow" class="code-login">验证码登陆</div>
		</div>
		<div class="code" v-else>
			<el-form ref="codeFormRef" :model="codeForm" :rules="codeRules">
				<el-form-item prop="phone">
					<el-input v-model="codeForm.phone" :prefix-icon="User" placeholder="请输入手机号" />
				</el-form-item>
				<el-form-item prop="code">
					<el-input v-model="codeForm.code2" placeholder="请输入验证码"> </el-input>
					<div class="get-code" @click="getCode">{{ isCode ? `验证码已发送 ${isTime}s` : '获取验证码' }}</div>
				</el-form-item>
			</el-form>

			<div class="form-btn">
				<el-button :icon="CircleClose" type="default" round @click="codeFormRef?.resetFields()">重置</el-button>
				<el-button :icon="UserFilled" type="primary" round :loading="loading" @click="submitCodeForm">登录</el-button>
			</div>
			<div @click="swiperShow" class="code-login">密码登录</div>
		</div>
	</div>
</template>

<style scoped lang="scss">
	@import '../index.scss';
</style>
